<template>
  <div>
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    <div style="margin-top: 30px"></div>
    <b><span style="color: red; margin-right: 20px">产品信息:</span>{{ info.name }}</b> <br />
    <p><span style="color: red; margin-right: 20px">产品价格:</span>{{ info.retail_price }}块</p>
    <p><span style="color: red; margin-right: 20px">产品库存:</span>{{ info.goods_number }}件</p>
    <p style="margin-top: 20px">
      <span style="color: red; margin-right: 20px">产品叙述:</span>
      {{ info.goods_brief }}
    </p>

    <dl>
      <dt>产品问题:</dt>
      <dd style="margin-top: 4px; margin-left: 20px; display: inline-block" v-for="item in issue" :key="item.question">
        <div>{{ item.question }}</div>
        <template>
          <dd style="margin-top: 4px; display: inline-block" :key="item.answer">{{ item.answer }}</dd>
        </template>
      </dd>
    </dl>

    <div v-html="info.goods_desc"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      issue: [],
    };
  },
  mounted() {
    console.log();
    const id = this.$route.params.id;
    this.$http
      .get('/koding/goods/detail', {
        // 地址栏传参
        params: {
          id: id,
        },
      })
      .then((ret) => {
        this.info = ret.data.info;
        this.issue = ret.data.issue;
      });
  },
  methods: {
    goBack() {
      // 返回上一页

      this.$router.go(-1);
    },
  },
};
</script>

<style></style>
